<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>短网址服务平台</title>
	<meta name="description" content="这是一个 index 页面">
	<meta name="keywords" content="index">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="icon" type="image/png" href="../assets/i/favicon.png">
	<link rel="apple-touch-icon-precomposed" href="../assets/i/app-icon72x72@2x.png">
	<meta name="apple-mobile-web-app-title" content="Amaze UI" />
	<link rel="stylesheet" href="//cdn.staticfile.org/amazeui/2.7.2/css/amazeui.min.css" />
	<link rel="stylesheet" href="../assets/css/admin.css">
	<link rel="stylesheet" href="../assets/css/app.css">
	<style>
		tr td {
			text-overflow: ellipsis;
			-moz-text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			text-align: left
		}
	</style>
</head>

<body data-type="generalComponents">
	<header class="am-topbar am-topbar-inverse admin-header" id="header">
	</header>
	<div class="tpl-page-container tpl-page-header-fixed">
		<div class="tpl-left-nav tpl-left-nav-hover">
			<div class="tpl-left-nav-title">功能区域</div>
			<div class="tpl-left-nav-list" id="menu"></div>
		</div>
		<div class="tpl-content-wrapper">
			<ol class="am-breadcrumb">
				<li><a href="#" class="am-icon-home">首页</a></li>
				<li><a href="#">短域管理</a></li>
				<li class="am-active">短域列表</li>
			</ol>
			<div class="tpl-portlet-components">
				<form id="dataForm" onsubmit="return false">
					<div class="portlet-title">
						<div class="caption font-green bold">
							<span class="am-icon-code"></span> 列表
						</div>
					</div>
					<div class="tpl-block">
						<div class="am-g">
							<div class="am-u-sm-12 am-u-md-6">
								<div class="am-btn-toolbar">
									<div class="am-btn-group am-btn-group-xs">
										<button type="button" class="am-btn am-btn-default am-btn-success"
											onclick="location.href='short_edit.html'">
											<span class="am-icon-plus"></span> 新增
										</button>
									</div>
								</div>
							</div>
							<div class="am-u-sm-12 am-u-md-3">
								<div class="am-form-group">
									<select name="appId" id="appList" data-am-selected="{btnSize: 'sm'}">
										<option value="">所有应用</option>
									</select>
								</div>
							</div>
							<div class="am-u-sm-12 am-u-md-3">
								<div class="am-input-group am-input-group-sm">
									<input type="text" class="am-form-field" name="url"> <span
										class="am-input-group-btn">
										<button onclick="$('#current').val(1);loadShorts()"
											class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search"
											type="button"></button>
									</span>
								</div>
							</div>
						</div>
						<div class="am-g">
							<div class="am-u-sm-12">
								<table class="am-table am-table-striped am-table-hover table-main">
									<thead>
										<tr>
											<th class="table-check"><input type="checkbox" class="tpl-table-fz-check">
											</th>
											<th class="table-id">ID</th>
											<th class="table-title">所属应用</th>
											<th class="table-type">短链地址</th>
											<th class="table-author am-hide-sm-only">原始地址</th>
											<th>访问</th>
											<th class="table-date am-hide-sm-only">创建时间</th>
											<th class="table-date am-hide-sm-only">状态</th>
											<th class="table-set">操作</th>
										</tr>
										<tr id="lineTemplate" style="display: none">
											<td><input type="checkbox"></td>
											<td>${id}</td>
											<td>${appName}</td>
											<td>${shortUrl}</td>
											<td class="am-hide-sm-only">${url}</td>
											<td>${frequency}</td>
											<td class="am-hide-sm-only">${createTime}</td>
											<td class="am-hide-sm-only">${status}</td>
											<td>
												<div class="am-btn-toolbar">
													<div class="am-btn-group am-btn-group-xs">
														<button onclick="location.href='short_edit.html?id=${id}'"
															class="am-btn am-btn-default am-btn-xs am-text-secondary">
															<span class="am-icon-pencil-square-o"></span> 编辑
														</button>
														<button onclick="del('${id}')"
															class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only">
															<span class="am-icon-trash-o"></span> 删除
														</button>
													</div>
												</div>
											</td>
										</tr>
									</thead>
									<tbody id="dataBody">
									</tbody>
								</table>
								<div class="am-cf">
									<div class="am-fr">
										<input type="hidden" name="current" id="current">
										<ul class="am-pagination tpl-pagination" id="pager">
											<li class="am-disabled"><a href="#">«</a></li>
											<li class="am-active"><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">»</a></li>
										</ul>
									</div>
								</div>
								<hr>
							</div>
						</div>
					</div>
					<div class="tpl-alert"></div>
				</form>
			</div>
		</div>
	</div>
	<script src="//cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
	<script src="//cdn.staticfile.org/amazeui/2.7.2/js/amazeui.min.js"></script>
	<script src="../assets/js/app.js"></script>
	<script src="../assets/js/loader.js"></script>
	<script src="../assets/js/common.js"></script>
	<script>
		$(function () {
			loadShorts();
			loadApps();
		});
		function del(id) {
			if (!confirm("数据删除后将无法恢复,确定执行此操作?")) {
				return;
			}
			$.post("/short/del", { id: id }, function (data) {
				if (data.code == 200) {
					location.reload();
					return;
				}
				alert(data.msg);
			}, 'json');
		}
		function loadShorts() {
			$.post("/short/page", form2JsonString($("#dataForm")), function (data) {
				$("#dataBody").html("");
				if (data.code != 200) {
					return;
				}
				var pager = data.datas;
				if (pager.count == 0) {
					return;
				}
				for (var index in pager.data) {
					var line = pager.data[index];
					console.info(line);
					var html = '<tr>';
					var template = $("#lineTemplate").html();
					template = template.replace(new RegExp('\\$\\{id\\}', "g"), line.id);
					template = template.replace(new RegExp('\\$\\{appName\\}', "g"), line.appName);
					template = template.replace(new RegExp('\\$\\{shortUrl\\}', "g"), line.shortUrl);
					template = template.replace(new RegExp('\\$\\{url\\}', "g"), line.url);
					template = template.replace(new RegExp('\\$\\{frequency\\}', "g"), line.frequency);


					var status = '已停用';
					if (line.status == 1) {
						status = '正常';
					}
					template = template.replace(new RegExp('\\$\\{status\\}', "g"), status);
					template = template.replace(new RegExp('\\$\\{createTime\\}', "g"), formatTimeStamp(line.createTime));
					html += template;
					html += '</tr>';
					$("#dataBody").append(html);
				}
				$("#current").val(pager.current);
				$("#pager").html("");
				//渲染分页
				var pagerHtml = '<li class="' + (pager.current == 1 ? 'am-disabled' : '') + '"><a href="JavaScript:toPager(1)">«</a></li>';
				var html = '';
				for (var i = pager.current - 3; i < pager.current + 3; i++) {
					if (i < 1) {
						continue;
					}
					if (i > pager.total) {
						continue;
					}
					if (pager.current == i) {
						html += '<li  class="am-active"><a href="JavaScript:toPager(' + i + ')">' + i + '</a></li>';
						continue;
					}
					html += '<li><a href="JavaScript:toPager(' + i + ')">' + i + '</a></li>';
				}
				pagerHtml += html;
				pagerHtml += '<li class="' + (pager.current == pager.total ? 'am-disabled' : '') + '"><a href="JavaScript:toPager(' + pager.total + ')">»</a></li>';
				$("#pager").html(pagerHtml);
			}, 'json');
		}

		function toPager(pager) {
			$("#current").val(pager);
			loadShorts();
		}
		function loadApps() {
			$.get("/app/list", function (data) {
				if (data.code != 200) {
					return;
				}
				$("#appList").html("<option value=''>所有应用</option>");
				for (var index in data.datas) {
					var html = "<option value='" + data.datas[index].id + "'>" + data.datas[index].name + "</option>";
					$("#appList").append(html);
				}
			}, 'json');
		}
	</script>
</body>

</html>